<template>
  <div id="love-book-share">
    <div class="img-bg">
      <img class="bg" src="@/assets/book/book_bg.jpg" alt="" />
      <img class="chuanfu" src="@/assets/book/船夫.png" alt="">
    </div>
    <div class="box">
      <div class="header"></div>
      <div class="content">
        <div class="row row-left">
          <div class="left">
            <span>书名</span>
          </div>
          <div class="right">
            <el-input
              v-model="bookObj.bookName"
              placeholder="请输入书名"
            ></el-input>
          </div>
        </div>
        <div class="row row-right">
          <div class="left">
            <span>拥有者</span>
          </div>
          <div class="right">
            <el-select
              v-model="bookObj.bookUserId"
              filterable
              placeholder="请选择拥有的同事"
            >
              <el-option
                v-for="item in yonghuArr"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="row row-left">
          <div class="left">
            <span>上架开始时间</span>
          </div>
          <div class="right">
            <el-date-picker
              v-model="bookObj.signTime"
              placeholder="开始时间点"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="row row-right">
          <div class="left">
            <span>上架结束时间</span>
          </div>
          <div class="right">
            <el-date-picker
              v-model="bookObj.signOverTime"
              placeholder="结束时间点"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="row row-left">
          <div class="left">
            <span>大类</span>
          </div>
          <div class="right">
            <el-select
              v-model="bookObj.bookBigId"
              filterable
              placeholder="请选择大类"
              @change="bigChange"
            >
              <el-option
                v-for="info in classBigList"
                :key="info.id"
                :label="info.name"
                :value="info.id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="row row-right">
          <div class="left">
            <span>小类</span>
          </div>
          <div class="right">
            <el-select
              :disabled="classSmallList.length == 0"
              v-model="bookObj.bookSmallId"
              filterable
              placeholder="请选择小类"
            >
              <el-option
                v-for="info in classSmallList"
                :key="info.id"
                :label="info.smallName"
                :value="info.id"
              ></el-option>
            </el-select>
          </div>
        </div>

        <div class="row row-left">
          <div class="left">
            <span>作者</span>
          </div>
          <div class="right">
            <el-input
              v-model="bookObj.bookAuthor"
              placeholder="请输入书的作者"
            ></el-input>
          </div>
        </div>
        <div class="row row-right">
          <div class="left">
            <span>出版时间</span>
          </div>
          <div class="right">
            <el-date-picker
              v-model="bookObj.bookPublishTime"
              placeholder="请输入书的出版时间"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
        </div>

        <div class="row row-left">
          <div class="left">
            <span>出版社</span>
          </div>
          <div class="right">
            <el-input
              v-model="bookObj.bookPublisher"
              placeholder="请输入出版社"
            ></el-input>
          </div>
        </div>
        <div class="row row-right">
          <div class="left">
            <span>书价</span>
          </div>
          <div class="right">
            <el-input
              v-model="bookObj.bookPrice"
              placeholder="请输入书的价格"
            ></el-input>
          </div>
        </div>
        <div class="row">
          <div class="left">
            <span>网购链接</span>
          </div>
          <div class="right">
            <el-input
              v-model="bookObj.bookUrl"
              placeholder="请输入网络链接"
            ></el-input>
          </div>
        </div>
        <div class="row">
          <div class="left">
            <span>封面图片链接</span>
          </div>
          <div class="right">
            <el-input
              v-model="bookObj.bookImage"
              placeholder="请输入图片链接"
            ></el-input>
          </div>
        </div>

        <div class="row">
          <div class="left">
            <span>简介</span>
          </div>
          <div class="right">
            <el-input
              v-model="bookObj.bookIntroduction"
              type="textarea"
              placeholder="请输入简介"
            ></el-input>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-button type="primary" @click="tijiao()">提交书籍</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  addBook,
  getBookBigClassList,
  getBookSmallClassList,
} from "@/api/book";
import { getYonghu } from "@/api/api";
export default {
  data() {
    return {
      bookObj: {
        bookName: "",
        bookSmallId: "",
        bookSmallName: "",
        bookBigId: "",
        bookBigName: "",
        bookLable: "",
        bookUserId: "",
        bookUserName: "",
        bookAuthor: "",
        bookPublisher: "",
        bookPublishTime: "",
        bookPrice: "",
        bookUrl: "",
        bookIntroduction: "",
        bookImage: "",
        signTime: "",
        signOverTime: "",
      },
      classBigList: [],
      classSmallList: [],
      yonghuArr: [],
    };
  },
  mounted() {
    this.getClassArr();
    this.getYonghu();
  },
  methods: {
    getYonghu() {
      getYonghu().then((res) => {
        this.yonghuArr = res;
      });
    },
    bigChange(e) {
      console.log(e);
      getBookSmallClassList({ bigClassId: e }).then((res) => {
        this.bookObj.bookSmallId = "";
        this.classSmallList = res.data;
      });
    },
    getClassArr() {
      getBookBigClassList().then((res) => {
        this.classBigList = res.data;
        // this.classBigList.splice(0,0,{
        //   id:null,name:"全部"
        // })
      });
    },
    tijiao() {
      let msg = "";
      if (this.bookObj.bookIntroduction == "") msg = "书的简介不能为空";
      if (this.bookObj.bookAuthor == "") msg = "书的作者不能为空";
      if (this.bookObj.bookSmallId == "") msg = "小类不能为空";
      if (this.bookObj.bookBigId == "") msg = "大类不能为空";
      if (this.bookObj.bookUserId == "") msg = "拥有者不能为空";
      if (this.bookObj.bookName == "") msg = "书名不能为空";
      if(msg != ""){
        this.$message.error(msg);return;
      }
      addBook(this.bookObj).then((res) => {
        if (res.code == "00000") {
          this.$message.success("成功插入");
        }
        else{
          this.$message.error(res.msg)
        }
      });
    },
  },
};
</script>
<style lang="stylus">
#love-book-share {
  width: 100%;
  height: calc(100% - 3px);
  position: absolute;
  left 0
  top 0
  display: flex;
  align-items: center;
  overflow hidden
  .img-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index -1

    .bg {
      width: 100%;
      height: 100%;
      opacity: 0.2;
    }
    .chuanfu{
      position absolute
      right 100px
      bottom 50px
    }
  }
  * {
    font-size: 14px;
  }

  .el-date-editor, .el-select {
    width: 100%;
  }
}
</style>
<style lang="stylus" scoped>
.box {
  margin: 10%;
  background: rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 15px;
  overflow: hidden;

  .content {
    width: 80%;
    height: 90%;
    margin: auto;
    padding: 20px 20px;
    border-bottom: 1px solid #909090;

    .row {
      // max-width 1000px
      width: 100%;
      min-height: 40px;
      display: flex;
      padding-bottom: 30px;

      .left {
        flex-basis: 150px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      .right {
        width: 100%;
        flex: 1;
        padding-left: 20px;
      }
    }

    .row-left {
      width: 50%;
      height: 100%;
      float: left;
    }

    .row-right {
      width: 50%;
      height: 100%;
      float: left;
    }
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }
}
</style>
